<template>
    <div class="dashboard-container">
        <!-- <div class="dashboard-text">欢迎来到后台管理系统 - 排课数据总览</div> -->

        <el-row :gutter="20" style="margin-top: 20px;">
            <el-col :span="12">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span>课程类型分布</span>
                        </div>
                    </template>
                    <div ref="courseTypeChart" style="width: 100%; height: 400px;"></div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span>教室使用情况 (今日)</span>
                        </div>
                    </template>
                    <div ref="roomUsageChart" style="width: 100%; height: 400px;"></div>
                </el-card>
            </el-col>
        </el-row>

        <el-row style="margin-top: 20px;">
            <el-col :span="24">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span>系统使用说明</span>
                        </div>
                    </template>
                    <div>
                        <pre>
这个排课系统的用法是
1. excel导入【排课任务】【班级】【教室】
2. 点击自动排课
3. 手动微调/解决冲突
4. 查看并导出课表
                        </pre>
                    </div>
                </el-card>
            </el-col>
        </el-row>

    </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import * as echarts from 'echarts';
import axios from 'axios';
// 如果需要，可以引入 Element Plus 的 Message 或其他组件
// import { ElMessage } from 'element-plus';

// 假设您会从API获取数据
// import axios from 'your-axios-instance'; // 替换为您的axios实例路径

const courseTypeChart = ref(null);
const roomUsageChart = ref(null);

// 示例数据，实际应用中应从后端获取
const courseTypeData = ref([
]);

const roomUsageData = ref({
});

const initCourseTypeChart = () => {
    if (courseTypeChart.value) {
        const myChart = echarts.init(courseTypeChart.value);
        const option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '课程类型',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: courseTypeData.value
                }
            ]
        };
        myChart.setOption(option);
        window.addEventListener('resize', () => {
            myChart.resize();
        });
    }
};

const initRoomUsageChart = () => {
    if (roomUsageChart.value) {
        const myChart = echarts.init(roomUsageChart.value);
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: roomUsageData.value.categories,
                    axisTick: { alignWithLabel: true }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '教室数量'
                }
            ],
            series: [
                {
                    name: '使用数量',
                    type: 'bar',
                    barWidth: '60%',
                    data: roomUsageData.value.values,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#83bff6' },
                            { offset: 0.5, color: '#188df0' },
                            { offset: 1, color: '#188df0' }
                        ])
                    }
                }
            ]
        };
        myChart.setOption(option);
        window.addEventListener('resize', () => {
            myChart.resize();
        });
    }
};

// 模拟从API获取数据
// 在 fetchData 函数中取消注释并修改为：
const fetchData = async () => {
    try {
        // 获取课程类型分布数据
        const responseCourse = await axios.get('/api/dashboard/course-types',{
            headers: {
                'token':localStorage.getItem('token') // 假设您的token存储在localStorage中，根据实际情况修改    
            }
        });
        // 修改这里：直接使用 responseCourse.data 而不是 responseCourse.json()
        if (responseCourse.data.code === 200) {
            courseTypeData.value = responseCourse.data.data;
        }

        // 获取教室使用情况数据
        const responseRooms = await axios.get('/api/dashboard/room-usage',{
            headers: {
                'token':localStorage.getItem('token') // 假设您的token存储在localStorage中，根据实际情况修改    
            }
        });
        // 修改这里：直接使用 responseRooms.data 而不是 responseRooms.json()
        if (responseRooms.data.code === 200) {
            roomUsageData.value = responseRooms.data.data;
        }

        console.log('数据加载成功');
    } catch (error) {
        console.error('数据加载失败:', error);
        // 使用默认/静态数据作为回退
    }

    // 数据获取后初始化图表
    await nextTick();
    initCourseTypeChart();
    initRoomUsageChart();
};

onMounted(() => {
    fetchData(); // 获取数据并初始化图表
});

</script>

<style scoped>
.dashboard-container {
    margin: 30px;
}

.dashboard-text {
    font-size: 24px; /* 调整字体大小 */
    line-height: 36px; /* 调整行高 */
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}

.el-card {
    margin-bottom: 20px; /* 为卡片之间添加一些间距 */
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

/* 如果需要，可以为 pre 标签设置更合适的样式 */
pre {
    background-color: #f5f5f5;
    padding: 15px;
    border-radius: 4px;
    white-space: pre-wrap; /* 允许长内容换行 */
    word-wrap: break-word; /* 允许单词内换行 */
    font-family: 'Courier New', Courier, monospace;
}
</style>